﻿@model MvcCmsProjectTracker.ViewModels.TicketEditViewModel
@{
    bool isAdmin = (Roles.IsUserInRole("Admin") || Roles.IsUserInRole("HelpDeskAdmin"));    
}           
@section HtmlHead{
    <link href="@Url.Content("/content/ckeditor.css") rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function ClearCommentText() {
            $('#comment').val("");
        }
    </script>
}
<h2>
    Ticket:@Model.Ticket.TicketID
</h2>
<div style="position: relative;">
    <form id="form1" action="" method="post">
    <div id="actionbuttons" style="width: 800px; text-align: right;">
        <p>
            <button onclick="SubmitForm();">Save</button>
            @if (Model.Ticket.DeveloperTicketID == null && isAdmin)
            {
                <button onclick="SubmitPromoteForm();">Promote To Developer Issue</button>
            }
            @Html.ActionLink("Delete", "Delete", new { id = Model.Ticket.TicketID }, new { @class = "button" })
            <a href="/projecttracker/ticket/myhelpdesk" class="button">Cancel</a>            
        </p>
    </div>
    <hr />
    @if (isAdmin)
    {
    <div class="editor-label" style="float: left; width: 150px">
        @Html.Label("Roles Visible To"):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.TextBox("RolesCanView", Model.Ticket.RolesCanView, new { style = "width:650px" })
    </div>
    <div class="clear">
    </div>        
    <div class="editor-label" style="float: left; width: 150px">
        @Html.Label("Closed"):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.CheckBox("Closed", Model.Ticket.Closed)
    </div>
    <div class="clear">
    </div>                
    }
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Ticket.Title):
    </div>
    <div class="editor-field" style="float: left;">
        @Html.TextBox("Title", Model.Ticket.Title, new { style = "width:650px" })
    </div>
    <div class="clear">
    </div>
    <div class="editor-label" style="float: left; width: 150px">
        @Html.LabelFor(model => model.Ticket.LastUpdate):
    </div>
    <div class="editor-field" style="float: left;">
        @String.Format("{0:g}", Model.Ticket.LastUpdate)
    </div>
    <div class="clear">
    </div>
    <hr />
    <div style="float: left; width: 430px">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Assigned To"):
        </div>
        <div class="editor-field" style="float: left;">
            @if (isAdmin)
            {
                if (Model.Ticket.AssignedUserID.HasValue)
                {
                @Html.DropDownList("AssignedUserID", new SelectList(Model.ProjectMembers, "User.UserID", "User.UserName", Model.Ticket.AssignedTo.UserID), new { style = "width:200px" })
                }
                else
                {
                    @Html.DropDownList("AssignedUserID", new SelectList(Model.ProjectMembers, "User.UserID", "User.UserName"), new { style = "width:200px" })
                }
            }
            else
            {
                @Model.Ticket.AssignedTo.UserName
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.Label("Created By"):
        </div>
        <div class="editor-field" style="float: left;">
            @Model.Ticket.CreatedBy.UserName
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Ticket.DateCreated):
        </div>
        <div class="editor-field" style="float: left;">
            @String.Format("{0:g}", Model.Ticket.DateCreated)
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            Project:
        </div>
        <div class="editor-field" style="float: left;">
            @Model.ProjectName
        </div>
        <div class="clear">
        </div>
    </div>
    <div style="float: left">
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Ticket.StatusID):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("StatusID", new SelectList(Model.ProjectStatuses, "StatusID", "Name", Model.Ticket.StatusID), new { style = "width:200px" })
            @if (Model.Ticket.StatusID != null)
            { 
                <img id="statusurl" src="@Url.Content(Model.ProjectStatuses.SingleOrDefault(s => s.StatusID == Model.Ticket.StatusID).ImageUrl)" alt="" />
            }
        </div>
        <div class="clear">
        </div>
        <div class="editor-label" style="float: left; width: 150px">
            @Html.LabelFor(model => model.Ticket.PriorityID):
        </div>
        <div class="editor-field" style="float: left;">
            @Html.DropDownList("PriorityID", new SelectList(Model.ProjectPriorities, "PriorityID", "Name", Model.Ticket.PriorityID), new { style = "width:200px" })
            @if (Model.Ticket.PriorityID != null)
            { 
                <img id="priorityurl" src="@Url.Content(Model.ProjectPriorities.SingleOrDefault(p => p.PriorityID == Model.Ticket.PriorityID).ImageUrl)" alt="" />
            }
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="clear">
    </div>
    <br />
    @Html.Hidden("Description", "")
    </form>
</div>
<div class="tab-container">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Description</a></li>
            <li><a href="#tabs-2">Comments</a></li>
            <li><a href="#tabs-3">Attachments</a></li>
            <li><a href="#tabs-4">History</a></li>
            <li><a href="#tabs-5">Notification</a></li>
        </ul>
        <div id="tabs-1">
            @Html.TextArea("Description_Editor", Model.Ticket.Description)
        </div>
        <div id="tabs-2">
            @Html.Partial("TicketComments", Model.TicketCommentViewModel)
            @using (Ajax.BeginForm("AddComment", "Ticket", new { id = Model.Ticket.TicketID }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "comments", OnFailure = "handleFailure", OnSuccess = "ClearCommentText" }))
            { 
                <b>
                    <label for="name">
                        Comment</label></b><br />
                @Html.TextArea("comment", "", 5, 80, null)<br />
                <br />
                <input type="submit" value="Submit" />
            }
        </div>
        <div id="tabs-3">
            @Html.Partial("TicketAttachments", Model.TicketAttachmentViewModel)
        </div>
        <div id="tabs-4">
            @Html.Partial("TicketHistory", Model.TicketHistoryViewModel)
        </div>
        <div id="tabs-5">
            @Html.Partial("TicketNotifications", Model.TicketNotificationViewModel)
        </div>
    </div>
</div>
<br />
@section ScriptContent{
    <script src="@Url.Content("/scripts/MvcCmsImageManager.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/scripts/ckeditor.js")" type="text/javascript"></script>
    <script src="@Url.Content("/areas/mvccmsprojecttracker/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Title: { required: true }
            },
            messages: {
                Title: "A Ticket Title Is Required"
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 802);
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Title":
                        error.css('top', 60);
                        break;
                }
            }
        });
    </script>
    <script id="DocumentReady" type="text/javascript">
        $(document).ready(function () {
            $("#tabs").tabs();
            ChangeEnter();
//            $("#history").accordion({
//                collapsible: true,
//                active: false
//            });
        });        
    </script>
    <script id="InitEditor" type="text/javascript">
        var editor;
        function ChangeEnter() {
            if (editor) { editor.destroy(true); }
            editor = CKEDITOR.replace('Description_Editor',
		    {
		        enterMode: Number(1),
		        shiftEnterMode: Number(2),
		        height: "430"
		    });
            MvcCmsImages.SetupCKEditor(editor);
        }
        function SubmitForm() {
            $("#Description").val(editor.getData());
            $("#form1").submit();
        }
        function SubmitPromoteForm() {
            $("#form1").attr("action", "/projecttracker/bug/promoteticket/@Model.Ticket.TicketID");
            $("#form1").submit();
        }        
    </script>
    <script type="text/javascript" id="ChangeImageDropdownChange">
        $('#Ticket_PriorityID').change(function () {
            var url = '/Project/GetPriorityURL/' + $("#Ticket_PriorityID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#priorityurl').attr("src", response);
                }
            });
        });

        $('#Ticket_StatusID').change(function () {
            var url = '/Project/GetStatusURL/' + $("#Ticket_StatusID").val();
            $.ajax({
                type: 'POST',
                url: url,
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (response) {
                    $('#statusurl').attr("src", response);
                }
            });
        });
    </script>
}
